<template>
  <div style="width: 100%">
    <el-upload v-if="!disabled" :action="baseGeneralPath + '/fast/uploadFile'" :show-file-list="false"
      :before-upload="beforeUpload" :on-success="uploadSuccess" :limit="limit">
      <el-button size="small" type="primary" icon="Upload">点击上传</el-button>
    </el-upload>
    <div class="file-list">
      <!-- <div>{{ fileListModel }}</div> -->
      <div class="file-row" v-for="file in fileListModel">
        <div v-if="['jpg', 'jpeg', 'png', 'gif'].includes(file.enclosureSuffix)">
          <div class="left">
            <!-- <img :src="`${file.resourceAddress}`" class="file-row-img" /> -->
            <!-- <el-button class="link-btn" @click="handlePre(file)" link type="primary">
              {{ file.enclosureContent }}
            </el-button> -->
            <!-- <a class="link" :href="file.resourceAddress" target="_blank">{{ file.enclosureContent }}</a> -->
            <el-button class="link-btn" @click="download(file)" link type="primary">
              {{ file.enclosureContent }}
            </el-button>
          </div>
        </div>
        <div v-else>
          <div class="left">
            <el-button class="link-btn" @click="download(file)" link type="primary">
              {{ file.enclosureContent }}</el-button>
            <!-- <a class="link" :href="file.resourceAddress" :download="file.enclosureContent">{{ file.enclosureContent }}</a> -->
          </div>
        </div>

        <el-icon v-if="!disabled" class="right" size="16" @click="handleDelete(file)">
          <Delete />
        </el-icon>
      </div>
    </div>
    <!-- <preViewFile :visible="false" :fileType="fileType" :url="fileUrl" @cancel="showFile = false"></preViewFile> -->
  </div>
</template>
<script>
import { baseUrlConfig } from '@/config/config'
import { downloadFiles } from "@/api/common";
import preViewFile from '../../../../../components/previewFile/index'

export default {
  components: {
    preViewFile
  },
  name: "HyUpload",
  props: {
    fileList: {
      type: Array,
    },
    disabled: {
      type: Boolean,
    }
    // limit: {
    //   type: Number,
    //   default: 1
    // }
  },
  computed: {
    fileListModel: {
      get() {
        return this.fileList
      },
      set(val) {
        this.$emit('update:fileList', val)
      }
    }
  },
  data() {
    return {
      baseGeneralPath: baseUrlConfig.businessBaseUrl,
      limit:1
    }
  },
  methods: {
    //下载
    download(data) {
      console.log('download', data);
      if (data.resourceAddress == null) {
        ElMessage.error(`文件地址不正确`)
        return
      }
      downloadFiles(data.enclosureCode).then(res => {
        const blob = new Blob([res], {
          type: 'application/octet-stream',
        })
        const a = document.createElement("a");
        const objectUrl = URL.createObjectURL(blob);
        a.setAttribute("href", objectUrl);
        a.setAttribute("download", data.enclosureName + "." + data.enclosureSuffix);
        a.click();
        URL.revokeObjectURL(a.href)
      })
    },
    // 预览
    handlePre(data) {
    },
    beforeUpload(file) {
      //1MB=1024*1024(1MB=1024KB 1KB=1024MB)
      const is10M = file.size / 1024 / 1024 < 10;

      //限制文件上传大小
      if (!is10M) {
        this.$message.error("上传大小不能超过 10MB!");
        return false
      }
      return true
    },
    uploadSuccess(response) {
      let file = {
        enclosureCode: response.data.enclosureCode, // 文件编码
        enclosureContent: response.data.enclosureContent || (response.data.enclosureName + '.' + response.data.enclosureSuffix), // 文件名
        enclosureName: response.data.enclosureName, //文件前缀
        enclosureSuffix: response.data.enclosureSuffix, // 文件后缀
        resourceAddress: response.data.resourceAddress,
      }
      if (this.fileListModel) {
        this.fileListModel.push(file)
      } else {
        this.fileListModel = [file]
      }
      this.limit = 1;
      console.log('fileListModel2', this.fileListModel[0].enclosureCode);
    },
    handleDelete(file) {
      this.limit = 2;
      console.log('删除');
      let index = this.fileListModel.findIndex(item => item === file)
      this.fileListModel.splice(index, 1)
    },
  }
}
</script>

<style lang="less" scoped>
.file-list {
  .file-row {
    box-sizing: border-box;
    padding: 10px 20px;
    background: #F3F4F7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    width: 100%;
    max-width: 400px;
    margin-top: 10px;

    .left {
      display: flex;
      align-items: center;

      .file-row-img {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        margin-right: 10px;
      }
    }

    .right {
      cursor: pointer;
    }

    &:hover {
      background: #DADDE4;
    }
  }

  .link {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>
